@import '../bootstrap'

.carousel
  height: 500px
  width: 100%
  position: relative
  overflow: hidden
  elevation(2)

  &__item
    display: flex
    align-items: center
    justify-content: center
    flex: 1 0 100%
    height: 100%
    width: 100%
    background-size: cover
    background-position: center center
    transition: .2s ease-out

  &__left, &__right
    position: absolute
    top: 50%
    z-index: 1
    transform: translateY(-50%)

    .btn
      color: #FFFFFF
      margin: 0 !important
      height: auto
      width: auto

      i
        font-size: 48px

      &:hover
        background: none

  &__left
    left: 5px
    
  &__right
    right: 5px

  &__controls
    background: rgba(0, 0, 0, .5)
    align-items: center
    bottom: 0
    display: flex
    justify-content: center
    left: 0
    position: absolute
    height: 50px
    list-style-type: none
    width: 100%
    z-index: 1

    &__item
      color: #FFFFFF
      margin: 0 1rem !important

      i
        opacity: .5
        transition: $primary-transition

      &--active
        i
          opacity: 1
          vertical-align: middle
          font-size: 2rem !important

      &:hover
        background: none

        i
          opacity: .8
